<template>
  <div class="page-login">
    <div class="page-login-container">
      <h2>后台管理系统登录</h2>
      <el-form ref="formRef" :model="formData" :rules="formRules">
        <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="isloading" @click="handlelogin">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>



<script>
import { login } from '../../api/user';
export default {
  name: "login",
  data() {
    return {
      formData: {
        username: "",//用户名
        password: "",//密码
      },
      formRules: {
        username: [
          { required: true, message: "请输入用户名" }
        ],
        password: [
          { required: true, message: "请输入密码" }
        ]

      },
      isloading: false,
    }
  },
  methods: {
    async handlelogin() {
      try {
        await this.$refs.formRef.validate();
        this.isloading = true
        login({
          adminname: this.formData.username,
          password: this.formData.password
        }).then((data) => {
          //console.log("then", response)
          // if (response.code === "200") {
          //   alert("登录成功");
          // } else {
          //   alert(response.message);
          // }
          //上面封装到request.js
          //登录成功转跳
          localStorage.setItem("token", data.data.token);

          //调用vuex的setUserName的username
          //this.$store.commit("setUsername", data.data.adminname);
          this.$store.commit("setState", data.data);


          function getName(route) {
            let str = "";
            if (route.children) {
              str = getName(route.children[0]);
            } else {
              str = route.name;
            }
            return str;
          }

          //调整有权限的第一个页面
          this.$router.push({ name: getName(this.$store.getters.permissionRoutes[0]), });

        }).catch((error) => {
          console.log("catch", error)
        }).finally(() => {
          this.isloading = false
          console.log("finally")
        });

      } catch (error) {

      }
    },



    // async handlelogin() {
    //   // this.$refs.formRef.validate((isOK) => {
    //   //   console.log(isOK)
    //   // })

    //   // await this.$refs.formRef
    //   //   .validate()
    //   //   .then(() => {
    //   //     console.log(true)
    //   //   })
    //   //   .catch(() => {
    //   //     console.log(false)
    //   //   })
    //   try {
    //     await this.$refs.formRef.validate();
    //     console.log(true);
    //   } catch (error) {
    //     console.log(false);
    //   }


    // },


  },
};

</script>

<style lang="scss">
$color: green;

.page-login {
  height: 100%;
  background-color: pink;
  overflow: hidden;

  &-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  }

  .el-form {
    padding: 32px 32px 14px;
    width: 320px;
    border-radius: 10px;
    background-color: yellow;
  }

  .el-button {
    width: 100%;
  }

  h2 {
    text-align: center;
  }

}
</style>